<template>
  <!--  地址灾害档案页面-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 条件筛选 -->
          <el-divider></el-divider>
          <div class="page_filter">
            <el-row :gutter="10" style="width: 100%" type="flex" justify="start">
              <el-col :span="4">
                <el-input v-model="form.queryString" clearable placeholder="边坡编号/名称" style="width: 100%">
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="form.height" clearable placeholder="高度(m)" style="width: 100%">
                  <template slot="prepend">高度大于</template>
                </el-input>
              </el-col>
              <el-col :span="3">
                <el-autocomplete
                  v-model="state"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="路线名称或编号"
                  @change="handleChange"
                  @select="handleSelect"
                ></el-autocomplete>
              </el-col>
              <el-col :span="3">
                <el-select v-model="form.slopeType" clearable placeholder="边坡类型" style="width: 100%">
                  <el-option
                    v-for="item in EnumSlopeTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="form.slopeSlideType" clearable placeholder="主线/匝道" style="width: 100%">
                  <el-option
                    v-for="item in EnumSlopeSlideTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="form.hasHistory" clearable placeholder="历史灾害" style="width: 100%">
                  <el-option
                    v-for="item in EnumSysBooleanList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select v-model="form.isMsjg" clearable placeholder="锚索加固" style="width: 100%">
                  <el-option
                    v-for="item in EnumSysBooleanList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>

          <div class="page_filter">
            <el-row :gutter="10" style="width: 100%" type="flex" justify="start">
              <el-col :span="3">
                <el-select v-model="form.riskLevel" clearable placeholder="风险评估等级" style="width: 100%">
                  <el-option
                    v-for="item in EnumRiskLevelList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>

              </el-col>
<!--              <el-col :span="4">-->
<!--                <el-select v-model="form.maintenanceInspection" clearable placeholder="养护检查等级" style="width: 100%">-->
<!--                  <el-option-->
<!--                    v-for="item in EnumMaintenanceInspectionList"-->
<!--                    :key="item.code"-->
<!--                    :label="item.name"-->
<!--                    :value="item.code">-->
<!--                  </el-option>-->
<!--                </el-select>-->

<!--              </el-col>-->
              <el-col :span="3">
                <el-select v-model="form.techniqueType" clearable placeholder="技术评定等级" style="width: 100%">
                  <el-option
                    v-for="item in EnumTechniqueTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>

              </el-col>
              <el-col :span="3">
                <el-select v-model="form.warningLevel" clearable placeholder="监测预警等级" style="width: 100%">
                  <el-option
                    v-for="item in EnumWarningLevelList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>

              </el-col>
<!--              <el-col :span="4">-->
<!--                <el-select v-model="form.progress" clearable placeholder="养护工程实施进度" style="width: 100%">-->
<!--                  <el-option-->
<!--                    v-for="item in EnumProgressList"-->
<!--                    :key="item.code"-->
<!--                    :label="item.name"-->
<!--                    :value="item.code">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-col>-->
              <el-col :span="3">
                <el-button
                  class="common_btn-defalut"
                  icon="el-icon-search"
                  @click="form.page = 1;queryList();">搜索
                </el-button>
              </el-col>
            </el-row>


          </div>
          <div class="page_main">
            <el-button icon="el-icon-plus" @click="handleAdd" class="common_btn-small">新增边坡动态</el-button>
            <el-button
              class="common_btn-defalut"
              icon="el-icon-download"
              @click="form.page = 1;downloadSlope();">下载
            </el-button>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table
              :data="tableList"
              border>
              <el-table-column
                label="序号"
                fixed
                width="80">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column prop="slopeNo" min-width="175" label="边坡编号"></el-table-column>
              <el-table-column prop="name" min-width="190" show-overflow-tooltip label="边坡名称"></el-table-column>
              <el-table-column prop="roadName" min-width="140" show-overflow-tooltip label="所属路线"></el-table-column>
              <el-table-column prop="deptName" min-width="120" show-overflow-tooltip label="养管单位"></el-table-column>
              <el-table-column prop="riskLevelName" min-width="140" label="风险评估等级">
                <template slot-scope="scope">
                  <el-tag @click="riskLevelCheckDetail(scope.row)" size="mini" :style="scope.row.riskLevel| gradeDangerColor2" style="color: white;cursor: pointer">
                    {{scope.row.riskLevelName}}
                  </el-tag>
                </template>
              </el-table-column>
<!--              <el-table-column prop="maintenanceInspectionName" min-width="145" label="养护检查等级">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-tag size="mini" :style="scope.row.maintenanceInspection| gradeDangerColor" style="color: white;cursor: pointer" @click="maintenanceInspectionChekDeatil(scope.row)">-->
<!--                    {{scope.row.maintenanceInspectionName}}-->
<!--                  </el-tag>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column prop="techniqueTypeName" min-width="140" label="技术评定等级">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.techniqueType| gradeDangerColor" style="color: white;cursor: pointer"
                          @click="checkDetail(scope.row)">
                    {{scope.row.techniqueTypeName}}
                  </el-tag>
                </template>
              </el-table-column>
              <!--              <el-table-column prop="maintenanceInspectionName" min-width="130" label="养护检查状态"></el-table-column>-->
              <el-table-column prop="warningLevelName" min-width="120" label="预警等级">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.warningLevel| gradeDangerColor" style="color: white">
                    {{scope.row.warningLevelName}}
                  </el-tag>
                </template>
              </el-table-column>
<!--              <el-table-column prop="progress" min-width="150" label="养护工程实施进度">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-tag size="mini" :style="scope.row.progress| gradeDangerColor" @click="progressCheckDetail(scope.row)" style="color: white;cursor: pointer">-->
<!--                    {{scope.row.progressName}}-->
<!--                  </el-tag>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column prop="height" min-width="120" show-overflow-tooltip label="高度"></el-table-column>
              <el-table-column prop="slopeTypeName" min-width="120" show-overflow-tooltip label="类型"></el-table-column>
              <el-table-column prop="hasHistoryName" min-width="120" show-overflow-tooltip label="历史灾害"></el-table-column>
              <el-table-column prop="isMsjg" min-width="120" show-overflow-tooltip label="锚索加固"></el-table-column>
              <el-table-column label="操作" fixed="right" width="120">
                <template slot-scope="scope">
                  <button class="btn_edit" @click="handleStatus(scope.row)">查看动态</button>
                  <button class="btn_add" @click="getSlopeList(scope.row)">
                    查看基础档案详情
                  </button>
                </template>

              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
                 :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total">
            </el-pagination>
          </div>
          <!-- 查看弹窗 -->
          <el-dialog
           title="边坡档案详情"
            v-if="isShowDialog1"
            :visible.sync="isShowDialog1"

            width="1080px">
            <div v-if="currentRow.name" style="
                font-size: 25px;
                font-weight: 600;
                text-align: center;
                color: #1990FE;
                margin-bottom: 10px;
              ">
              {{ currentRow.name }}
            </div>
            <div class="dialogAdd">
              <el-tabs v-model="activeName" type="border-card" class="dialogCard">
                <el-tab-pane label="基本情况" name="base">
                  <form-base v-model="currentRow" ref="formBase" :roadList2="roadList" :isEdit="isEdit"></form-base>
                </el-tab-pane>
                <el-tab-pane label="坡体特征" name="type">
                  <form-type v-model="currentRow" ref="formType" :isLook="!isEdit"></form-type>
                </el-tab-pane>
                <el-tab-pane label="防护设施" name="survey">
                  <form-fang-hu v-model="currentRow" ref="formFangHu" :isLook="!isEdit"></form-fang-hu>
                </el-tab-pane>
                <el-tab-pane label="其他信息" name="risk">
                  <form-di-zhi v-model="currentRow" ref="formDizhi" :isLook="!isEdit"></form-di-zhi>
                </el-tab-pane>
                <el-tab-pane label="边坡照片" name="pic">
                  <el-row :gutter="10" v-if="!isEdit">
                    <el-col
                      :span="5"
                      v-for="(o, index) in currentRow.slopePicList"
                      :key="index">
                      <el-card :body-style="{ padding: '0px' }" style="color: #1990FE">
                        <el-image
                          @click="_previewImg(index, currentRow.slopePicList)"
                          style="height: 200px"
                          fit="scale-down"
                          :src="constUrl + o.url"></el-image>
                        <div style="padding: 14px">
                          <span>{{ o.name }}</span>
                          <div class="bottom clearfix">
                            <time class="time">{{ o.time | formatTimer }}</time>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <form-img
                    v-else
                    v-model="currentRow"
                    ref="formImg"
                  ></form-img>
                </el-tab-pane>
              </el-tabs>
              <!-- 操作按钮 -->
              <picture-viewer ref="imageViewer"></picture-viewer>
            </div>
            <span slot="footer" class="dialog-footer" v-if="isEdit">
              <el-button class="common_btn-white" type="info" @click="isShowDialog1 = false">取消</el-button>
              <el-button class="common_btn-defalut" :disabled="isShowDialog1" type="primary"
                         @click="validateForm">确定</el-button>
            </span>
          </el-dialog>
          <!-- 操作记录-->
          <el-dialog :title="slopeName +'时间线'"
                     :visible.sync="isShowDialog"
                     :close-on-click-modal="true"
                     @open="init"
                     :close-on-press-escape="false" width="200px">
            <div style="height: 400px;overflow: auto;padding: 10px">
              <form-status ref="operation" :id="slopeId"></form-status>
            </div>
          </el-dialog>
          <!-- 新增边坡动态 -->
          <el-dialog
            :close-on-click-modal="false"
            title="新增边坡动态"
            :visible.sync="isShowAddDialog"
            width="520px">

            <el-form label-position="right" label-width="80px" ref="form" :model="currentRow">
              <el-form-item label="管养单位" prop="deptTreeId" style="margin-top: 20px">
                <organization
                  v-model="currentRow.deptTreeId"
                  placeholder="选择管养单位"
                  @change="changeDept2"
                ></organization>
              </el-form-item>
              <el-form-item label="路线" prop="roadId">
                <el-select
                  :popper-append-to-body="false"
                  v-model="currentRow.roadId"
                  clearable
                  filterable
                  placeholder="选择路线"
                  @change="changeRoad">
                  <el-option
                    v-for="item in roadSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="边坡" prop="slopeId">
                <el-select
                  :popper-append-to-body="false"
                  v-model="currentRow.slopeId"
                  filterable
                  clearable
                  placeholder="选择边坡">
                  <el-option
                    v-for="item in slopeSelectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="动态类型" prop="statusType">
                <el-select v-model="currentRow.statusType"
                           filterable
                           clearable placeholder="选择边坡动态类型">
                  <el-option v-for="item in EnumSlopeStatusTypeList" :key="item.code" :label="item.name"
                             :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="动态等级" prop="status">
                <el-select v-model="currentRow.status"
                           filterable
                           clearable placeholder="选择边坡动态等级">
                  <el-option v-for="item in slopeStatusList" :key="item.name" :label="item.name" :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="情况描述" v-if="currentRow.statusType!==1"  prop="explanation">
                <el-input
                  v-model.trim="currentRow.explanation"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  placeholder="具体情况描述">
                </el-input>
              </el-form-item>
              <div v-if="currentRow.statusType==1">
                <el-form-item label="调查单位" prop="investigationDeptTreeId" style="margin-top: 20px">
                  <organization
                    v-model="currentRow.investigationDeptTreeId"
                    placeholder="选择调查单位"
                  ></organization>
                </el-form-item>
                <el-form-item label="调查人" prop="investigator" style="margin-top: 20px">
                  <el-input v-model="currentRow.investigator"></el-input>
                </el-form-item>
              </div>
              <el-form-item label="时间" prop="createTime">
                <el-date-picker
                  v-model="currentRow.createTime"
                  type="date"
                  placeholder="选择日期"
                  align="right">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowAddDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateAddForm">确定</el-button>
      </span>
          </el-dialog>
          <x-loading v-show="isLoading"></x-loading>

          <!-- 手填内容展示-->
          <el-dialog
            :close-on-click-modal="false"
            :title="levelDialogTitle"
            :visible.sync="isShowLevelDialog"
            width="520px">
            <el-form label-position="right" label-width="150px" ref="form" :rules="rules" :model="currentRow">
              <el-form-item :label="currentRow.labelLevelName" prop="deptTreeId" style="margin-top: 20px">
                <p>{{currentRow.labelLevel}}</p>
              </el-form-item>
              <el-form-item :label="currentRow.labelExplanationName" prop="deptTreeId" style="margin-top: 20px">
                <p>{{currentRow.labelExplanation||'暂无说明'}}</p>
              </el-form-item>
            </el-form>
          </el-dialog>
<!--          风险评估详情弹窗-->
          <el-drawer
            :title="riskTitle"
            :visible.sync="riskLeveForm"
            v-if="riskLeveForm"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            size="60%">
            <div class="demo-drawer__content">
              <slope-risk-form ref="dailyPatrol" @submitClose="riskSubmitClose"
                                      :isLook="isLook"></slope-risk-form>
            </div>
            <div class="demo-drawer__footer" v-if="!isLook">
              <el-button @click="newForm=false" type="info">取 消</el-button>
              <el-button type="primary" class=" common_btn-defalut" @click="submitDrawer">确 定</el-button>
            </div>
          </el-drawer>

        </div>
      </el-col>
    </el-row>

    <!--          查看边坡技术评定-->
    <el-drawer :title="showDetailTitle"
               :visible.sync="showDetail"
               v-if="showDetail"
               custom-class="demo-drawer"
               size="60%">
      <div class="demo-drawer__content1">
        <technical-check-detail ref="operation" :currentRow="currentRow" :template="currentRow.formList"
                                :isLook="isLook" @submit="submit"></technical-check-detail>
      </div>
    </el-drawer>
<!--    养护检查-->
    <el-drawer
      :title="maintenanceInspectionTitle"
      :visible.sync="maintenanceInspectionForm"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="60%">
      <div class="demo-drawer__content">
        <often-patrol ref="oftenPatrol" @submitClose="maintenanceInspectionSubmitClose" :isLook="isLook" @disableds="disableds"></often-patrol>
      </div>
    </el-drawer>

<!--   养护工程实施进度详情 -->
    <el-drawer
      title="查看轨迹"
      :visible.sync="timeline"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%">
      <div class="demo-drawer__content time_line">
        <el-timeline style="height: 800px;overflow: auto">
          <el-timeline-item
            v-for="(item, index) in timelineData"
            :key="index"
            color="#0bbd87"
            :timestamp="item.createTime | formatTimer"
            placement="top">
            <el-card>
              <el-row :gutter="10">
                <el-col :span="8">
                  <p class="status">
                    <el-tag size="medium" :style="item.status | gradeStatusColor" effect="dark"
                            style="color: white">
                      {{item.statusName}}
                    </el-tag>
                  </p>
                  <p class="info">操作单位：{{item.companyName}}</p>
                  <p class="info" v-if="item.explanation">说明：{{item.explanation}}</p>
                </el-col>
                <!--相关文件和图片-->
                <el-col :span="8">
                  <el-alert
                    :closable="false" title="相关文件，可点击下载" type="info" show-icon>
                  </el-alert>
                  <a v-for="file in item.fileList" :key="file.url" style="color: #1990FE;text-align: left"
                     :href="constUrl + file.url"
                     :download="file.name">
                    <p style="font-size: 20px"><i class="el-icon-document"></i>
                      <span style="font-size: 12px">{{file.name}}</span>
                      <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>

                  </a>
                  <div style="color:grey;text-align: center;line-height: 50px" v-if="item.fileList.length < 1">
                    没有文件...
                  </div>
                </el-col>
                <el-col :span="8">
                  <el-alert
                    :closable="false" title="相关图片，可点击查看大图" type="info" show-icon>
                  </el-alert>
                  <el-image
                    style="width: 100px; height: 100px;cursor: pointer;border: 1px #a6a6a6 solid" :key="index"
                    v-for="(img,index) in item.picList"
                    :src="constUrl + img.url" @click="previewImg(index,item.picList)"
                    fit="fill"></el-image>
                  <div style="color:grey;text-align: center;line-height: 50px" v-if="item.picList.length < 1">
                    没有照片...
                  </div>
                </el-col>
              </el-row>

            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <picture-viewer ref="imageViewer"></picture-viewer>
    </el-drawer>
  </div>
</template>

<script>
  import OrganizationTree from '@/components/organization-tree/all'
  import Organization from "@/components/organization-unit/all";
  import XLoading from '@/components/animation/x-loading.vue'
  import PictureViewer from "@/components/picture-viewer/index-name";
  import {
    getSlopeStatusList,downloadSlopeStatus,
    slopeStatusAdd
  } from '@/services/model/road-mgmt'
  import Format from '@/utils/format'
  import ItemMixins from "./slope-modules/item.mixins";
  import FormStatus from "./old-modules/form-status";
  import TechnicalCheckDetail from "../form/slope_technique_new/detailNew";
  import slopeRiskForm from "../form/slope_risk/slppeRiskFormNew";
  import OftenPatrol from "../form/maintenance_inspection/often-patrol";
  import FormBase from "./slope-modules/form-base";
  import FormDiZhi from "./slope-modules/form-dizhi";
  import FormImg from "./slope-modules/form-img";
  import FormFangHu from "./slope-modules/form-fanghu";
  import FormType from "./slope-modules/form-type";
  import {
    getTimeTree,
  } from '@/services/model/progress'
  import {getTechnicalDetail,sloppeDetail,patrolDetail} from '@/services/model/form';
  import {getSlope} from '@/services/model/road-mgmt';
  import constUrl from '@/services/env'
  import {getTechnicalDetailNew, sloppeDetailNew} from "../../services/model/form";
  import Enums from '@/utils/enums'

  // 初始的搜索参数
  export default {
    mixins: [ItemMixins,Enums],
    components: {OrganizationTree, Organization, FormStatus, XLoading, TechnicalCheckDetail,slopeRiskForm,OftenPatrol,PictureViewer,    FormBase,
      FormType,
      FormDiZhi,
      FormFangHu,
      FormImg,},
    data() {
      return {

        constUrl,
        //养护工程实施进度
        timeline:false,
        timelineData:[],
        //养护检查
        disableds:true,
        maintenanceInspectionTitle:'',
        maintenanceInspectionForm:false,
        //风险评估
        isEdit:false,
        riskTitle:'',
        riskLeveForm:false,
        isShowLevelDialog: false,
        showDetail: false,  //技术状况评定展示

        showDetailTitle: '',
        isLook: true,
        levelDialogTitle:"",
        // 技术术状况评定
        restaurants: [],
        state: '',
        timeout: null,
        rules: {
          status: {required: true, message: '请选择状态'},
          explanation: {required: true, message: '请输入情况描述'},
          statusType: {required: true, message: '请选择边坡动态类型'},
          createTime: {required: true, message: '请选择时间'},
        },
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        slopeName: '',
        form: {
          page: 1,
          pageSize: 10,
          roadId: '',
        },
        // 接口正在加载
        isLoading: false,
        slopeId: '',
        tableList: [],
        isShowDialog: false, // 是否显示弹窗
        isShowDialog1: false, // 是否显示弹窗
        isShowAddDialog: false, // 是否显示弹窗
        currentRow: {}, // 新增数据
        deptRoadList: [],
        EnumSlopeTypeList: [],
        EnumSysBooleanList:[],
        EnumSlopeSlideTypeList: [],
        EnumRiskLevelList: [],
        EnumTechniqueTypeList: [],
        EnumMaintenanceInspectionList: [],
        EnumProgressList: [],
        EnumWarningLevelList: [],
        EnumSlopeStatusTypeList: [],
        EnumSlopeStatusTypeList1: [],
        slopeSelectList: [],
        roadSelectList: [],
      }
    },
    computed: {
      slopeStatusList() {
        switch (this.currentRow.statusType) {
          case 1://风险评估
            return this.EnumRiskLevelList
          case 2://养护检查
            return this.EnumMaintenanceInspectionList
          case 3://隐患排查
            return this.EnumMaintenanceInspectionList
          case 4://监测预警
            return this.EnumWarningLevelList
          case 5://养护工程进度
            return this.EnumProgressList
          case 6://技术状况评定
            return this.EnumTechniqueTypeList
        }
        return []
      },
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑地质灾害档案' : '新增地质灾害档案'
      },
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
      },
      gradeDangerColor(val) {
        switch (val) {
          case null:
            return 'background-color:#9e9e9e'
          case 0:
            return 'background-color:#9e9e9e'
          case 1:
            return 'background-color:#0DC26B'
          case 2:
            return 'background-color:#0073b7'
          case 3:
            return 'background-color:#f39c12'
          case 4:
            return 'background-color:#ff851b'
          case 5:
            return 'background-color:#e43321'
          default:
            return 'background-color:#e43321'
        }
      },
      gradeDangerColor2(val) {
        switch (val) {
          case null:
            return 'background-color:#9e9e9e'
          case 0:
            return 'background-color:#9e9e9e'
          case 1:
            return 'background-color:#e43321'
          case 2:
            return 'background-color:#FF851B'
          case 3:
            return 'background-color:#0073B7'
          case 4:
            return 'background-color:#0DC26B'
          default:
            return 'background-color:#e43321'
        }
      },
    },
    methods: {
      // 查看大图
      previewImg(index, urls) {
        const urlList = JSON.parse(JSON.stringify(urls));
        urlList.map((x) => {
          x.url = this.constUrl + x.url;
          return x;
        });
        // 显示照片查看器
        this.$refs.imageViewer.showViewer(urlList, index);
      },
      //养护工程实施进度详情
      async progressCheckDetail(row) {
        if(row.progress==0){
          return
        }
        if (!row.progressOrderId) {
          this.levelDialogTitle='养护工程实施'
          this.isShowLevelDialog = true
          this.currentRow.labelLevelName = '养护工程实施等级：'
          this.currentRow.labelExplanationName = '养护工程实施说明：'
          this.currentRow.labelLevel = row.progressName
          this.currentRow.labelExplanation = row.progressExplanation
        } else {

          let {data} = await getTimeTree({id: row.progressOrderId})
          this.timelineData = data || []
          this.timeline = true
        }

      },
      async initCheckItem() {
        if (!this.currentRow.weiHaiDuiXiangList) {
          this.currentRow.weiHaiDuiXiangList = [];
        }
        if (!this.currentRow.slopeProtectList) {
          this.currentRow.slopeProtectList = [];
        }
        if (!this.currentRow.diBiaoShuiTiList) {
          this.currentRow.diBiaoShuiTiList = [];
        }
        if (!this.currentRow.riverProtectList) {
          this.currentRow.riverProtectList = [];
        }
        if (!this.currentRow.protectionTypeList) {
          this.currentRow.protectionTypeList = [];
        }
        if (!this.currentRow.waterDrainStepList) {
          this.currentRow.waterDrainStepList = [];
        }
        if (!this.currentRow.waterDrainStuffList) {
          this.currentRow.waterDrainStuffList = [];
        }
        if (!this.currentRow.waterDrainShapeList) {
          this.currentRow.waterDrainShapeList = [];
        }
        if (!this.currentRow.groundwaterDrainStepList) {
          this.currentRow.groundwaterDrainStepList = [];
        }
        if (!this.currentRow.slopeItem.yanZhiItem) {
          this.currentRow.slopeItem.yanZhiItem = {};
        }
        if (!this.currentRow.slopeItem.tianFangItem) {
          this.currentRow.slopeItem.tianFangItem = {};
        }
        if (!this.currentRow.slopeItem.tuZhiItem) {
          this.currentRow.slopeItem.tuZhiItem = {};
        }
      },
      async getSlopeList(row){
      let {data}=  await getSlope({id:row.id})
        this.checkDetails(data)
      },
      checkDetails(row) {
        this.currentRow = JSON.parse(JSON.stringify(row));
        this.initCheckItem();
        this.activeName = "base";
        this.isEdit = false;
        this.isShowDialog1 = true;
        this.$nextTick(() => {
          this.$refs.formBase.changeDept('look');
          this.$refs.formBase.getRoadSectionInfo2();
        });
      },
      //养护检查详情
      async  maintenanceInspectionChekDeatil(row) {
        if(row.maintenanceInspection==0){
          return
        }
        if (!row.maintenanceInspectionOrderId) {
          this.levelDialogTitle='养护检查等级'
          this.isShowLevelDialog = true
          this.currentRow.labelLevelName = '养护检查等级：'
          this.currentRow.labelExplanationName = '检查说明：'
          this.currentRow.labelLevel = row.maintenanceInspectionName
          this.currentRow.labelExplanation = row.maintenanceInspectionExplanation
        } else {
          this.showDetailTitle='公路边坡经常性检查表单详情'
          this.isLook = true
          this.currentRow = row
          let detail = await patrolDetail({id: row.maintenanceInspectionOrderId})
          this.maintenanceInspectionForm = true
          detail.data.maintenanceInspectionType=row.maintenanceInspectionType
          detail.data.maintenanceInspectionTypeName=row.maintenanceInspectionTypeName
          this.$nextTick(function () {
            this.$refs.oftenPatrol.getTemplate(detail.data);
          });
        }
      },
      //关闭养护检查详情
      maintenanceInspectionSubmitClose() {
        this.maintenanceInspectionForm = false
        this.queryList()
      },
      //风险评估详情
      async riskLevelCheckDetail(row) {
        if(row.riskLevel==0){
          return
        }
        if (!row.riskOrderId) {
          this.levelDialogTitle='风险评估'
          this.isShowLevelDialog = true
          this.currentRow.labelLevelName = '风险评估等级：'
          this.currentRow.labelExplanationName = '评估说明：'
          this.currentRow.labelLevel = row.riskLevelName
          this.currentRow.labelExplanation = row.riskOrderExplanation
        } else {
          this.riskTitle = '边坡风险评估调查表详情'
          this.isLook = true
          this.riskLeveForm = true
          let detail = await sloppeDetailNew({id: row.riskOrderId})
          detail.data.riskLevel=row.riskLevel
          detail.data.riskLevelName=row.riskLevelName
          this.$nextTick(function () {
            this.$refs.dailyPatrol.getTemplate(detail.data);
          });
        }

      },
      //关闭风险评估
      riskSubmitClose() {
        this.riskLeveForm = false
        this.queryList()
      },
      //查看技术评定详情
      async checkDetail(row) {
        if(row.techniqueType==0){
          return
        }
        if (!row.techniqueOrderId) {
          this.isShowLevelDialog = true
          this.levelDialogTitle='技术状况评定'
          this.currentRow.labelLevelName = '评定等级：'
          this.currentRow.labelExplanationName = '评定说明：'
          this.currentRow.labelLevel = row.techniqueTypeName
          this.currentRow.labelExplanation = row.techniqueExplanation
        } else {
          this.showDetail = true
          this.showDetailTitle = '查看边坡技术状况评定详情'
          this.isLook = true
          let detail = await getTechnicalDetailNew({id: row.techniqueOrderId})
          this.currentRow = detail.data
        }

      },
      submit() {
        this.currentRow = {};
        this.showDetail = false
        this.queryList()
      },
      // 模糊搜索路线
      querySearchAsync(queryString, cb) {
        var restaurants
        if (!queryString) {
          restaurants = [];
        } else {
          restaurants = this.restaurants;

        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect(item) {
        this.form.roadId = item.id
        this.changeRoad()
      },
      handleChange(item) {
        if (item == '') {
          this.form.roadId = ''
        }
      },
      //获取路线列表
      async changeDept2() {
        this.roadSelectList = await this.getRoadListByDept(this.currentRow.deptTreeId);
        this.$set(this.currentRow, "roadId", "");
        this.$set(this.currentRow, "slopeId", "");
        if (this.roadSelectList.length > 0) {
          this.$set(this.currentRow, "roadId", this.roadSelectList[0].id);
          this.changeRoad()
        }
      },
      //查询灾害点列表
      async changeRoad() {
        this.slopeSelectList = [];
        const {roadId, deptTreeId} = this.currentRow;
        this.$set(this.currentRow, "slopeId", "");
        this.slopeSelectList = await this.getSelectSlopeList(deptTreeId, roadId)
        if (this.slopeSelectList.length > 0) {
          this.$set(this.currentRow, "slopeId", this.slopeSelectList[0].id);
        }
      },
      async submitAddForm() {
        let res = await slopeStatusAdd(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: "success",
            title: "提示",
            message: "添加成功",
          });
          this.isShowAddDialog = false
          this.queryList()
        }
      },
      // 表单提交
      validateAddForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitAddForm()
          }
        })
      },
      // 新增数据
      async handleAdd() {
        this.currentRow = {}
        let EnumSlopeStatusTypeList=JSON.parse(JSON.stringify(this.EnumSlopeStatusTypeList1))
        this.EnumSlopeStatusTypeList= EnumSlopeStatusTypeList.filter(x=> {

          return x.code!==6&&x.name!=='隐患排查'
        })
        this.EnumSlopeStatusTypeList.splice(1,1)
        this.isShowAddDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      }
      ,
      init() {
        this.$nextTick(() => {
          this.$refs.operation.getInvestigateOperation(this.slopeId)
        })
      },
      handleStatus(row) {
        this.isShowDialog = true
        this.slopeName = row.name
        this.slopeId = row.id
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.queryList()
        this.changeDept()
      },
      //获取路线列表
      async changeDept() {
        this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId)
        let data = []
        this.deptRoadList.map(x => {
          data.push({
            id: x.id,
            value: x.name,
            name: x.name
          })
        })
        this.restaurants = data
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },

      async downloadSlope() {
        this.isLoading = true
        // 先根据选择设置查询参数
    await downloadSlopeStatus(this.form)

        this.isLoading = false
      },
      async queryList() {
        this.isLoading = true
        // 先根据选择设置查询参数
        let res = await getSlopeStatusList(this.form)
        if (res.code === 200) {
          this.tableList = res.data?.records || []
          this.form.total = Number(res.data?.total)
        }
        this.isLoading = false
      },
    },
    mounted() {
      // 启用状态枚举
      this.queryDictList(['EnumSlopeStatusType', 'EnumProgress', 'EnumSlopeType', 'EnumSlopeSlideType', 'EnumSlopeRiskLevel', 'EnumTechniqueType', 'EnumMaintenanceInspection', 'EnumWarningLevel','EnumSysBoolean'], ['EnumSlopeStatusTypeList1', 'EnumProgressList', 'EnumSlopeTypeList', 'EnumSlopeSlideTypeList', 'EnumRiskLevelList', 'EnumTechniqueTypeList', 'EnumMaintenanceInspectionList', 'EnumWarningLevelList','EnumSysBooleanList']);


    },
    activated() {

    }
  }
</script>
<style scoped="scoped" lang="less">
  .build_button_view .el-button--default {
    background-color: #1990FE !important;
    color: white !important;
  }

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        width: 100%;
        height: 50px;
        padding: 0;
        padding-left: 20px;

      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  /deep/ .build_button_view .el-button--default {
    background: #1990FE !important;
  }

  .page .page_filter::after {
    height: 0px !important
  }
</style>
